import React from "react";
import { connect } from "dva";
// import ImgPlaceHold from "@components/ImgPlaceHold";
import { IMG_BASE, JUMP_URL } from "@constants";
import Details from "./detail.js";


import { px2rem, inIos, loadImgsFn,touchEventFn } from "@utils/tools";
import TWEEN from '@tweenjs/tween.js'
// import { Downloader, Parser, Player } from 'svga.lite'


import style from "./index.less";
var  SVGA =require('svgaplayerweb');

var innerHeight = 0;
window.swiperVideosReady = false;

window.videoArrForCyr = [];



var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
if (bodyWidth > bodyHeight) {
  //如果横屏则转换
  bodyWidth = document.body.clientHeight;
  bodyHeight = document.body.clientWidth;
}

var writePaperTopVal = 1122;
var writePaperBottomVal = 0;
var writePaperVal = bodyHeight * (750 / bodyWidth) - writePaperTopVal;
if (writePaperVal >= 275) {
  writePaperVal = 275;
} else if (writePaperVal <= 70) {
  writePaperVal = 70;
}
writePaperVal = writePaperVal + writePaperBottomVal ;
console.log("writePaperVal", writePaperVal)

function hsp() {
  var gethsp = function (event) {
    var orientation = (window.innerWidth > window.innerHeight) ? "landscape" : "portrait";
    if (orientation === 'landscape') {
      //横屏
      window.showhp();
    } else {
      window.showsp();
    }
  }
  gethsp()
  window.addEventListener("resize", gethsp, false);
}


class App extends React.PureComponent {
  state = {
    printBtnClicked: false,
    playPrintAni: false,
    isImgLoaded: false,
    isHp: false,
    showCase:false,
    caseIndex:1,
  };
  playHeadAni = false;
  videoArr = [];
  targetVideo = null;



  componentDidMount() {
    // setTimeout(this.fullScreen.bind(this),3100)
    var _this = this;
    document.title = "汇丰银行";

    window.showhp = _this.showhp.bind(this);
    window.showsp = _this.showsp.bind(this);
    hsp();

    loadImgsFn([
      `${IMG_BASE}page_0.jpg`,
      `${IMG_BASE}page_1_1.jpg`,
      `${IMG_BASE}page_1_2.jpg`,
      `${IMG_BASE}page_1_3.jpg`,
      `${IMG_BASE}page_1_4.jpg`,
      `${IMG_BASE}page_2_1.jpg`,
      `${IMG_BASE}page_2_2.jpg`,
      `${IMG_BASE}page_2_3.jpg`,
      `${IMG_BASE}page_2_4.jpg`,
      `${IMG_BASE}page_3_1.jpg`,
      `${IMG_BASE}page_3_2.jpg`,
      `${IMG_BASE}page_3_3.jpg`,
      `${IMG_BASE}page_3_4.jpg`,
      `${IMG_BASE}page_4_1.jpg`,
      `${IMG_BASE}page_4_2.jpg`,
      `${IMG_BASE}page_4_3.jpg`,
      `${IMG_BASE}page_4_4.jpg`,
      `${IMG_BASE}page_4_5.jpg`,
    ], () => {

      window.tms_check_timer =  setInterval(() => {
        if(window.TMS){
          clearInterval(window.tms_check_timer);
          console.log("TMS系统初始化完毕");
          window.trackViewFn0();
          _this.setState({
            isImgLoaded: true
          }, () => {
            // _this.initHeadAni();
          })
        }
      }, 100);

    })


  }


  showhp() {
    this.setState({
      isHp: true
    })
  }

  showsp() {
    this.setState({
      isHp: false
    })
  }

  gotoPage(index){
    this.setState({
      showCase:true,caseIndex:index 
    })
    window.donotReport = false;
    switch (index) {
      case 1:
        window.trackViewFn1();
        break;
      case 2:
        window.trackViewFn4();
        break;
      case 3:
        window.trackViewFn8();
        break;
      case 4:
        window.trackViewFn11();
        break;
      default:
        break;
    }
  }

  goBack(){
    //子页返回主页
    this.setState({
      showCase:false
    },()=>{
      window.trackViewFn0();
    })
  }



  render = () => {
    const { banners } = this.props.homePage;
    const { playHeadAni, playPrintAni, isImgLoaded, isHp,printBtnClicked,showCase,caseIndex } = this.state;

    console.log(IMG_BASE, "IMG_BASEIMG_BASE");
    console.log(isHp, "isHp");

    var _this = this;
    var ios = inIos();

    innerHeight = window.innerHeight;


    return (
      <div className="conBox2021Q1_1" style={{ width: "100%", height: "100%", overflowY:printBtnClicked?"auto": "hidden", overflowX: "hidden", opacity: isImgLoaded ? "1" : "0" }} id="conBox">
        {isHp && <div style={{
          width: "100%", height: "100%", textAlign: "center", paddingTop: "20%", fontSize: px2rem(30), background: "#000", color: "#fff",
          position: "absolute", zIndex: "999999", left: "0px", top: "0px"
        }}>
          竖屏体验，效果更佳哦~
      </div>}
        {isImgLoaded && [
        <div className="con" key={"con"} 
          style={{transform:showCase?"translate(-100%, 0px)":"translate(0%, 0px)"}}
        >


          <div className="index_box" 
          // style={{transform:showCase?"translate(-100%, 0px)":"translate(0%, 0px)"}}
          // style={{left:showCase?"-100%":"0%"}}
          >
            <img src={`${IMG_BASE}page_0.jpg`} className="page_img11" alt="" />
            <div className="list_item ov_btn1" onClick={this.gotoPage.bind(this,1)}></div>
            <div className="list_item ov_btn2" onClick={this.gotoPage.bind(this,2)}></div>
            <div className="list_item ov_btn3" onClick={this.gotoPage.bind(this,3)}></div>
            <div className="list_item ov_btn4" onClick={this.gotoPage.bind(this,4)}></div>
          </div>

          <div className="detailsBox" 
          // style={{transform:!showCase?"translate(0%, 0px)":"translate(-100%, 0px)"}}
          // style={{left:!showCase?"100%":"0%"}}
          >
            <Details isActive={caseIndex==1} caseIndex={1} goback={this.goBack.bind(this)}></Details>
            <Details isActive={caseIndex==2} caseIndex={2} goback={this.goBack.bind(this)}></Details>
            <Details isActive={caseIndex==3} caseIndex={3} goback={this.goBack.bind(this)}></Details>
            <Details isActive={caseIndex==4} caseIndex={4} goback={this.goBack.bind(this)}></Details>
          </div>
          
          

        </div>
      ]}
      </div>
    );
  };
}

export default connect(({ system, homePage }) => ({
  system: system.toJS(),
  homePage: homePage.toJS(),
}))(App);
